import { useKeyPress } from "ahooks";
import { List } from "antd";
import { useEditorContext } from "../../store/editor-provider";
import WidgetCard from "./card";

type Props = {};

export default function WidgetList(props: Props) {
  const { editor, dispatch } = useEditorContext();

  useKeyPress(["esc"], () => {
    dispatch({ type: "select", payload: { id: null } });
  });

  const data = editor?.widgetList;

  return (
    <section
      className='main-canvas'
      style={{ background: editor.golbalSettings.canvasBgColor }}
    >
      <List
        grid={{ gutter: 16, column: 2 }}
        dataSource={data}
        rowKey={"id"}
        renderItem={(item) => {
          return <WidgetCard info={item} />;
        }}
      />
    </section>
  );
}
